<header class="hero background-sky"><h1 class="hero-title ">教程: 英雄指南 </h1><div class="clear"></div></header>
<div class="banner"><p class="text-body translated-cn">英雄指南教程带我们一步步使用 TypeScript 创建 Angular 应用。</p></div>
<article class="l-content-small grid-fluid docs-content" style="display: block;">
    <p class="translated translated-cn">本教程的终极计划是构建一个程序，来帮助招聘公司管理一群英雄。即使英雄们也需要找工作。</p><p class="original-english hidden">The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.</p>
    <p class="translated translated-cn">这篇《英雄指南》覆盖了 Angular 的核心原理。这次构建的应用会涉及很多特性：获得并显示英雄列表，编辑所选英雄的详情，并在英雄数据的多个视图之间建立导航。这些特性，在成熟的、数据驱动的应用中经常见到。</p><p class="original-english hidden">The Tour of Heroes app covers the core fundamentals of Angular. You'll build a basic app that has many of the features you'd expect to find in a full-blown, data-driven app: acquiring and displaying a list of heroes, editing a selected hero's detail, and navigating among different views of heroic data.</p>
    <p class="translated translated-cn">我们将使用内置指令来显示 / 隐藏元素，并且显示英雄数据的列表。 我们将创建组件来显示英雄的详情和英雄列表。 我们将对只读数据使用单向数据绑定。我们将添加一些可编辑字段，并通过双向数据绑定更新模型。 我们将把组件上的方法绑定到用户事件上，比如按键和点击。 我们将让用户能从主列表视图中选择一个英雄，然后在详情视图中编辑它。 我们将通过管道对数据进行格式化。 我们将创建一个共享服务来管理我们的英雄们。 我们将使用路由在不同的视图及其组件之间进行导航。</p>
</article>
<style type="text/css" ui-bs>
    .hero { box-sizing: border-box; box-shadow: none; padding: 48px 48px 32px 48px; position: relative; height: 168px; }
    .background-sky { background-color: #1976D2; background: linear-gradient(145deg,#0D47A1,#42A5F5); color: #fff; }
    .hero .hero-title { display: inline-block; font-size: 28px; font-weight: 400; float: left; line-height: 48px; margin: 0 8px 0 0; text-transform: uppercase; }
    .banner { background: rgba(236,239,241,0.24); border-bottom: 1px solid #ECEFF1; box-sizing: border-box; font-size: 18px; font-weight: 200; padding: 32px 48px; min-height: 97px; }
    .banner p, .banner .text-body { color: #607D8B; font-size: 18px; line-height: 32px; margin: 0; }
    .l-content-small { padding: 48px; max-width: 1100px; margin: 0; }
    .docs-content p { margin: 0 0 24px 0; font-size: 16px; font-weight: 400; line-height: 28px; padding: 0; }
    .translated-cn { font-family: "Helvetica Neue",Arial,STHeiti,"Microsoft YaHei",sans-serif,Helvetica,"DroidSansFallback",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3"!important; }
</style>

